import { JSXElement, ParentProps } from 'solid-js'
import { A } from '@solidjs/router'

export default function DefaultLayout(props: ParentProps): JSXElement {
  return (
    <>
      <header>
        <nav>
          <ul style={{ display: 'flex', gap: '2rem', 'justify-content': 'space-between' }}>
            <li>
              <A href="/">首页</A>
            </li>
            <li>
              <A href="hello">Hello</A>
            </li>
            <li>
              <A href="about">About</A>
            </li>
            <li>
              <A href="foobar">Not Found</A>
            </li>
          </ul>
        </nav>
      </header>
      <main class="main">{props.children}</main>
      <footer>Footer</footer>
    </>
  )
}
